<!-- 用户管理 -->
<template>
  <div class="disease-item" v-if="questionList && questionList.length > 0">
    <div class="disease-title"><img :src="imagePath" alt="" />{{ title }}</div>
    <div class="disease-message">
      <div class="disease-message-left">问题模块</div>
      <el-button :icon="Refresh" :loading="btnLoading" class="disease-message-right" link v-if="isShow" @click="reload">
        换一批
      </el-button>
    </div>
    <div class="item-sonList" v-if="questionList && questionList.length > 0">
      <div class="item-son" v-for="(item, index) in questionList" @click="itemClick(item)" :key="index">
        <div class="item-son-title">病害描述</div>
        <div class="item-son-text">
          {{ item.remark }}
        </div>
        <div class="item-son-img">
          <img src="../../../assets/images/d06.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { QuestionQuery, QuestionVO } from "@/api/ai/question/types";
import { listQuestion } from "@/api/ai/question/index";
import { Refresh } from "@element-plus/icons-vue";

const props = defineProps({
  bridgeType: {
    type: String,
    default: "",
  },
  diseaseType: {
    type: String,
    default: "",
  },
  index: {
    type: Number,
    default: 0,
  },
  category: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
});
// 监听顶部按钮(diseaseType)点击变化
watch(
  () => props.diseaseType,
  (newValue) => {
    params.diseaseType = newValue;
    getData();
  }
);
// 监听顶部下拉选择框(bridgeType)点击变化
watch(
  () => props.bridgeType,
  (newValue) => {
    params.bridgeType = newValue;
    getData();
  }
);
const btnLoading = ref<boolean>(false);
// 查询参数
const params = reactive<QuestionQuery>({
  bridgeType: props.bridgeType, // 桥型 1级
  category: props.category, // 问题分类-菜单 2级
  diseaseType: props.diseaseType, //  选中按钮 3级
  pageNo: 1,
  pageSize: 4,
});

// 返回值
const questionList = ref<QuestionVO[]>([]);
const imagePath = ref(null);
const total = ref<number>(0);
const isShow = ref<boolean>(true);
// 编辑事件
const emit = defineEmits(["updateData"]);

// 点击每一个问题卡并把内容传给父组件
const itemClick = (value) => {
  const itemData = {
    bridgeType: params.bridgeType,
    category: params.category,
    diseaseType: value.diseaseType,
  };
  emit("updateData", value.remark, itemData);
};
// 换一批
const reload = () => {
  if (params.pageNo * params.pageSize < total.value) {
    params.pageNo++;
  } else {
    params.pageNo = 1;
  }
  getData();
};

// 获取问题
function getData() {
  if (!params.diseaseType) {
    return;
  }
  btnLoading.value = true;
  listQuestion(params).then(({ data }) => {
    const records = data.records;
    questionList.value = records;
    total.value = data.total;
    btnLoading.value = false;
    // 如果当前数据不够分页则换一批按钮不展示
    if (
      (params.pageNo === 1 && params.pageNo * params.pageSize > total.value) ||
      (params.pageNo === 1 && params.pageNo * params.pageSize == total.value)
    ) {
      isShow.value = false;
    } else {
      isShow.value = true;
    }
  });
}

onMounted(() => {
  getData();
  // 图片地址
  imagePath.value = new URL(
    `../../../assets/images/t${props.index + 1}.png`,
    import.meta.url
  ).href;
});
</script>

<style lang="scss" scoped>
.disease-item {
  margin-top: 22px;
  font-size: var(--el-font-size-base);

  .disease-title {
    display: flex;
    align-items: center;
    color: $main-text;
    margin-bottom: 8px;

    img {
      width: 32px;
      height: 38px;
    }
  }

  .disease-message {
    display: flex;
    justify-content: space-between;
    margin-bottom: 11px;

    .disease-message-left {
      color: $main-text;
    }

    .disease-message-right {
      color: var(--el-color-primary-dark-2);
      cursor: pointer;

      &::before {
        background: none !important;
      }
    }
  }

  .item-sonList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .item-son {
      margin: 5px 18px 0px 5px;
      position: relative;
      width: 240px;
      height: 104px;
      background: rgba(72, 128, 225, 0.3);
      border-radius: 12px 12px 12px 12px;
      padding: 15px 10px;
      cursor: pointer;

      &:nth-child(4n) {
        margin-right: 0;
      }

      .item-son-title {
        color: $main-text;
        margin-bottom: 8px;
      }

      .item-son-text {
        color: $main-text;
      }

      .item-son-img {
        position: absolute;
        bottom: 17px;
        right: 19px;
        width: 16px;
        height: 15px;
      }
    }
  }

  .noList {
    width: 100%;
    height: 104px;
    text-align: center;

    .noList-img {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: center;

      img {
        width: auto;
        height: 100%;
      }
    }
  }
}
</style>
